<template>
    <row>
        <col span="24">
        <div class="conversation active">
            <img class="conversation-img" src="~@/assets/350-400.jpg"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">18:10</div>
            <div class="conversation-badge"><Badge dot></Badge></div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">09:10</div>
            <div class="conversation-badge"><Badge dot></Badge></div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/10</div>
        </div>
        <col>
        <col span="24">
        <div class="conversation">
            <img class="conversation-img" src="#"/>
            <div class="conversation-user">巫妖王</div>
            <div class="conversation-content">你们这是自寻死路！你们这是自寻死路！</div>
            <div class="conversation-datetime">2018/10/11</div>
        </div>
        <col>
    </row>
</template>

<script>
    import Row from "iview/src/components/grid/row";

    export default {
        components: {Row},
        name: "user-message"
    }
</script>

<style scoped>
    .conversation {
        position: relative;
        height: 60px;
        border-bottom: 1px #cccccc solid;
    }

    .conversation-img {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
    }

    .conversation-user {
        position: absolute;
        top: 10px;
        left: 60px;
        font-size: 14px;
    }

    .conversation-content {
        position: absolute;
        top: 35px;
        left: 60px;
        width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }

    .conversation-datetime {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 14px;
    }
    .conversation-badge {
        position: absolute;
        top: 30px;
        right: 15px;
        font-size: 14px;
    }


    .active {
        background-color: #C5C5C5;
    }
</style>